<template>
  <div class="a_z_login">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="账号密码登录">
        <usrpwd></usrpwd>
      </a-tab-pane>
      <a-tab-pane key="2" tab="手机号码登录" force-render>
        <phone></phone>
      </a-tab-pane>
    </a-tabs>
    <div class="a_z_tip">
      <a-radio class="auto_login">自动登录</a-radio>
      <a-button class="forget" type="link">忘记密码</a-button>
    </div>
    <div class="btn">
      <a-button type="danger" block size="large" @click="login">登录</a-button>
    </div>
  </div>
</template>

<script>
import usrpwd from '../../components/user/login/usrpwd.vue'
import phone from '../../components/user/login/phone.vue'
export default {
  components: {
    usrpwd,
    phone
  },
  methods: {
    login (e) {
      console.log(e)
      this.$router.push('/')
    },
    callback (e) {
      console.log(e)
    }
  }
}
</script>

<style lang='scss' scoped>
.a_z_login {
  width: 400px;
  height: 300px;
  .a_z_tip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2em;
    .auto_login {
      visibility: hidden;
    }
    .forget {
      color: #52c41a;
    }
  }
}
</style>
